<template>
  <div class="itemBody">
    <div class="itemBody2" ref="inner" v-if="show">
      <div class="pageTitle" v-if="titleArray.length>0" ref="pageTitle">
        <sequence></sequence>
        <div class="pageTitlel" ref="pageTitlel">
          <p class="text" v-for="(char, index) in titleArray" :style="{ '--delay': index * 0.1 +0.8+ 's' }">{{
              char
            }}</p>
        </div>
        <div class="pageTitler">
          <lottie :path="data" :width="20" :height="20"></lottie>
        </div>
      </div>
      <div class="itemBodyInner" :class="{itemBodyInner2:!title}">
        <slot></slot>
      </div>
    </div>
    <!--    向下展开的背景-->
    <div class="bg" ref="bg" v-if="!show"></div>
  </div>
</template>

<script>
import {gsap} from 'gsap';
import lottie from '@/components/lottie/index.vue'
import data from './assets/data.json'
import sequence from "./sequence/index.vue";
export default {
  data() {
    return {
      show: false,
      data
    }
  },
  components: {lottie,sequence},
  props: {
    delay: {
      type: Number,
      default() {
        return 0;
      }
    },
    duration: {
      type: Number,
      default() {
        return 0.5;
      }
    },
    title: {
      type: String,
      default() {
        return '';
      }
    }
  },
  computed: {
    titleArray() {
      return this.title.split('');
    }
  },
  mounted() {
    var that = this;
    gsap.to(this.$refs.bg, {
      height: '100%',
      delay: that.delay,
      duration: that.duration, // 动画持续时间（以秒为单位）
      ease: 'none', // 使用线性动画缓动函数
      onComplete: () => {
        this.getMainAnimation()
      },
    });
  },
  methods: {
    // 主体动画
    getMainAnimation() {
      var that = this;
      setTimeout(() => {
        that.show = true
        // 添加新的 GSAP 动画来改变透明度
        that.$nextTick(() => {
          gsap.to(that.$refs.inner, {
            opacity: 1,
            duration: 1, // 这里可以设置渐显动画的持续时间
          });
          // that.getTitleAnimation()
        })
      }, 100)
    },
  },
}
</script>

<style lang="scss" scoped>
.itemBody {
  position: relative;
  width: 100%;
  height: 100%;

  .itemBody2 {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
    //background: rgba(0, 11, 35, 0.7);
    //border: 1px solid rgba(9, 73, 137, 0.83);
    border-top: 0;
  }

  .pageTitle {
    width: 100%;
    height: 57px;
    margin-left: -20px;
    position: relative;
    //background: url("./assets/titlebg.png") no-repeat;
    //background-size: 100% 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    .pageTitlel {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      margin-left: 45px;

      .text {
        opacity: 0;
        font-family: AlibabaPuHuiTiB;
        font-weight: bold;
        font-size: 20px;
        color: #F6F9FE;
        font-style: italic;
        background-image: linear-gradient(180deg, #9cc5e2 0%, #f3fafe 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transform: translateY(1em);
        animation: appear 0.5s forwards;
        animation-delay: var(--delay);
      }
    }

    .pageTitler {
      font-size: 12px;
      font-family: AlibabaPuHuiTiR;
      font-weight: 400;
      font-style: italic;
      color: #C6ECEB;
      text-align: right;
      width: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .itemBodyInner {
    position: relative;
    width: 100%;
    height: calc(100% - 57px);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
  }

  .itemBodyInner2 {
    height: calc(100% - 0px) !important;

  }

  .bg {
    height: 0%;
    margin-top: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 0;
    background: linear-gradient(to bottom, rgba(#052457,0.2), rgba(#052457, 0.5));
  }
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
